// 模拟服务器上的传递过来的数据
let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ]
    // console.log(apiTypeData);

/* 定义html代码片段 */
let html = ''
    /* 组装html代码片段*/
apiTypeData.forEach(function(v, i) {
        /* 获取所需元素 */
        html += `<a  data-keyword= '${v.keyword}' class='${i===0 ? 'active' : ''} ${v.isnew ? 'bold':''}' href="#">${v.name} </a>`
            // console.log(html);

    })
    /* 将获取元素渲染到页面 */
$('.navs').innerHTML = html

/* 事件委派 点击菜单栏改变数据*/
$('.navs').addEventListener('click', function(e) {
    /* 做判断，获取所需元素 */
    if (e.target.nodeName === "A") {

        [...$('.navs').children].forEach(function(dom) {
                /* 删除所有的a标签激活样式的类名 */
                dom.classList.remove('active');
            })
            /* 给当前选中的目标元素添加激活样式的类名 */
        e.target.classList.add('active');

        /* 设置搜索文本 */
        $('.more-name .strong').textContent = e.target.textContent

        /* 设置搜索关键字 */
        $('.more-name input').placeholder = e.target.dataset.keyword
    }
})

/* api数据渲染 */

//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]

/* 定义html代码片段 */
let ulhtml = '';

listDataArr.forEach(function(v) {
    // console.log(v);
    ulhtml += `  <li>
  <span class="${v.isSpecial? 'dblock':'dnone'}">企业专用</span>
  <div class="png-box">
      <img src="../../assets/imgs/${v.img}" alt="">
      <p class="fangyi">${v.name}</p>
      <p class="mianfei ${v.price==='免费'? 'green':'red'}">${v.price}</p>
  </div>
  <div class=" bottom-box">申请数据</div>
</li>`
})
$('.apiul').innerHTML = ulhtml

/* 跳转 */
$a('.png-box').forEach(function(v) {
    // console.log(v);
    v.addEventListener('click', function() {
        location.href = "../apidetails/apidetails.html"
    })
})

/* 点击弹出蒙层 */

$a('.bottom-box').forEach(function(v) { //遍历所有的 点击数据
    v.addEventListener('click', function() {
        $('.mask').style.display = 'flex'
    })
})

/* 点击蒙层空白区域关闭蒙层 */
$('.mask').addEventListener('click', function() {
    $('.mask').style.display = 'none';
})

//阻止冒泡，点击模态框自身部分不会触发隐藏
$('.motaik').addEventListener('click', function(e) {
    e.stopPropagation();
})